<template>
    <div class="main">
      <h3>用户注册</h3>
      <el-form
        :model="ruleForm"
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="pass">
          <el-input
            type="text"
            v-model="ruleForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.pwd"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="register"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        ruleForm: {
            username: '',
            pwd:''
          },
      };
    },
    methods: {
        async register(){
            let{data:{code,msg}} = await this.axios.post("/register",this.ruleForm)
            if(code==200){
                this.$router.push("/login")
                this.$message.success(msg)
            }else{
                this.$message.error(msg)
            }
        }
    },
  };
  </script>
  
  <style>
  * {
    margin: 0;
    padding: 0;
  }
  .main {
    background: gray;
    width: 600px;
    height: 400px;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    text-align: center;
  }
  h3{
    margin-top: 20px;
  }
  .el-input{
    width: 400px;
  }
  .el-form-item{
    /* margin-left: 10px; */
    margin-top: 50px;
  }
  </style>